<template>
	<view class="">
		<view class="box">
			<view class="flex order-lesson">
				<view class="f1 flex">
					<image v-if="course" :src="$img(course.cover)" mode="aspectFill" class="order-img" />
					<view class="lesson-info between column">
						<view class="">
							<view class="fw-b" v-if="course">{{ course.title }}</view>
							<view class="gray" v-if="course">课程类型：{{ course.class.name }}</view>
						</view>
						<view class="flex align-c">
							<view class="gray">次数：</view>
							<view class="price" v-if="detail">
								<text>{{ detail.used }}</text>
								<text class="price-util">/{{ detail.number }}次</text>
							</view>
						</view>
					</view>
				</view>
				<stepper :num="num" @changeNum="changeNum"></stepper>
			</view>
		</view>
		
		<view class="">
			<button class="confirm-btn" @click="submitWriteOff">确认核销</button>
		</view>
	</view>
</template>

<script>
	import stepper from '@/components/stepper.vue'
	export default {
		components: {
			stepper
		},
		data() {
			return {
				list: [1,2],
				num: 1,
				last_page: 1,
				id: '',
				detail: null,
				course: null,
				shop_id: '',
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getWriteOffList();
		},
		onShow() {
			this.shop_id = uni.getStorageSync('shopId');
			this.getWriteOffList();
		},
		methods: {
			valChange(e) {
				this.value = e.value
			},
			changeNum(n) {
				const {detail} = this;
				var total = parseInt(detail.number)- parseInt(detail.used);
				if(n == 'add') {
					if(this.num < total) {
						this.num ++;
					}
				}else {
					if(this.num == 1) {
						uni.showToast({
							title: '最少核销一个~',
							icon: 'none'
						});
						return false;
					}else {
						this.num --;
					}
				}
			},
			async getWriteOffList() {
				let res = await this.$api.get(`staff/course_order/detail/${this.id}`);
				if(res.code == 200) {
					console.log('核销数据详情：',res);
					this.detail = res.data;
					this.course = res.data.course;
				}
			},
			async submitWriteOff() {
				let res = await this.$api.post('staff/order/check', {
					order_id: this.id,
					times: this.num,
					shop_id: this.shop_id,
					type: this.detail.type == 1?'public':'',
				});
				if(res.code == 200) {
					console.log('确认核销数据：',res);
					uni.showToast({
						title: res.msg
					});
					setTimeout(v => {
						uni.navigateBack()
					},2000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 20rpx 0;
		padding: 33rpx 37rpx;
		background-color: #FFF;
		font-size: 27rpx;
	}
	.order-lesson{
		align-items: flex-end;
		.order-img {
			width: 133rpx;
			height: 133rpx;
			background-color: #F7F7F7;
			margin-right: 24rpx;
		}
		.lesson-info {
			font-size: 27rpx;
			.gray {
				color: #B3B3B3;
				font-size: 24rpx;
				font-weight: normal;
			}
			
		}
	}
	.price {
		color: #F51B1B !important;
		font-weight: bold;
		font-size: 32rpx;
		.price-util {
			font-size: 20rpx;
			font-weight: normal;
		}
	}
	.confirm-btn {
		margin: 27rpx;
		background-color: #F17816;
		color: #FFF;
		font-size: 32rpx;
		height: 93rpx;
		line-height: 93rpx;
	}
</style>